<!--
 * @Author: huang liang miao 1127255342@qq.com
 * @Date: 2024-11-13 11:08:53
 * @LastEditors: huang liang miao 1127255342@qq.com
 * @LastEditTime: 2024-12-03 09:53:23
 * @FilePath: \dcy-webd:\webCode\dcyCode\scientific_research_manager_web\src\views\system\role\index.vue
 * @Description: 角色管理
-->

<script setup lang="ts">
import RoleMember from './components/RoleMember.vue'
import RoleAuthority from './components/RoleAuthority.vue'
import RoleList from './components/RoleList.vue'

const tablist = ['角色成员', '角色权限']
const activeIndex = ref(0)

const roleInfo = ref() // 左测当前角色信息

function getRoleInfo(val: string) {
  roleInfo.value = val
}

// tab菜单切换
function onTabChange(v: number) {
  activeIndex.value = v
}

</script>

<template>
  <div class="app-container">
    <!-- 左测角色列表 -->
    <RoleList @role-info="getRoleInfo" />
    <div v-if="roleInfo" class="list">
      <div class="tab-items">
        <span v-for="(item, index) in tablist" :key="index" :class="{ active: activeIndex === index }" @click="onTabChange(index)">{{ item }}</span>
      </div>
      <div v-if="activeIndex === 0" class="item-tab py-[16px] pr-[16px]">
        <RoleMember :role-id="roleInfo?.id" />
      </div>
      <div v-if="activeIndex === 1" class="item-tab pt-[16px]">
        <RoleAuthority :role-info="roleInfo" />
      </div>
    </div>
    <el-empty v-else class="mx-auto" :image-size="120" description="暂无成员数据，请先添加角色类型" />
  </div>
</template>

<style lang="scss" scoped>
@import "@/assets/styles/variables.module.scss";
.app-container{
  @apply: flex items-center h-full p-0;
  :deep(.arco-tabs-tab){
    padding: 30px 0 !important;
  }
  .list{
    @apply: h-full pl-[16px] relative;
    width: calc(100% - 240px);
    .tab-items{
      @apply: w-full flex items-center px-[4px];
      border-bottom: 1px solid #E5E6EB;
      span{
        @apply: inline-block h-[48px] text-[#4E5969] leading-[48px] mr-[32px] cursor-pointer;
      }
      .active{
        @apply: text-[$--color-primary] font-700;
        border-bottom: 2px solid $--color-primary;
      }
    }
  }
  .item-tab{
    @apply: overflow-auto;
    height: calc(100% - 48px);
  }
}
</style>
